<template>
  <div ref="table_container2" class="table_container">
    <el-table
      ref="table"
      :data="parent.tableData2"
      stripe
      border
      style="width: 99.9%"
      :header-cell-class-name="headerCellClassName"
      @selection-change="selectionChange1"
    >
      <el-table-column label="" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.materialName }}</span>
        </template>

      </el-table-column>
      <el-table-column v-if="parent.listData1.length == 0" min-width="250" label="" class="main_qualityItemName" />
      <el-table-column v-for="(item, index) in parent.listData1" v-else :key="index" min-width="250" :show-overflow-tooltip="true" :render-header="renderHeader" :label="item.showData" prop="qualityItemName">
        <template slot-scope="scope">
          <el-input v-model="scope.row[`itemPropertyName${index + 1}`]" min-width="250" placeholder="请输入" clearable />
          <el-form v-if="item.itemPropertyName == '判定项'" label-position="left" class="expand_container">
            <el-form-item class="expand_radio">
              <el-radio v-model="scope.row[`singleDecide_${index + 1}`]" :disabled="parent.formData.canEdit == '1'" :label="2" @input="getSingleDecide(scope.row, $event, index)"><svg-icon icon-class="勾" /></el-radio>
              <el-radio v-model="scope.row[`singleDecide_${index + 1}`]" :disabled="parent.formData.canEdit == '1'" :label="1" @input="getSingleDecide(scope.row, $event, index)"><svg-icon icon-class="叉" /></el-radio>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="单项判定" width="100" fixed="right" prop="singleDecide">
        <template slot-scope="scope">
          <el-form label-position="left" class="expand_container">
            <el-form-item class="expand_radio">
              <div v-if="scope.row.singleDecide == 2">
                <svg-icon icon-class="勾" />
              </div>
              <div v-if="scope.row.singleDecide == 1">
                <svg-icon icon-class="叉" />
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'AddOrUpdate',
  props: {
    parent: {}
  },
  data() {
    const checkNumber = (rule, value, callback) => {
      if (!this.formData.checkNumber) {
        callback(new Error('送检数量不能为空'))
      } else if (Number(this.formData.checkNumber) < Number(this.formData.disqualificationNumber)) {
        callback(new Error('送检数量不能小于不合格数量'))
      } else if (this.formData.checkNumber && !this.SETTINGS.reg_no_zero.test(this.formData.checkNumber)) {
        callback(new Error('送检数量填写不正确'))
      } else {
        callback()
      }
    }
    return {
      singleNumber: 0,
      rules: {
        checkNumber: [
          { validator: checkNumber, required: true, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  mounted() {
    const dom = this.$refs.table.bodyWrapper
    dom.addEventListener('scroll', () => {
      this.handleScroll(dom)
    })
  },
  methods: {
    renderHeader(h, data) {
      return h('span', [
        h('span', {
          attrs: {
            class: 'main_title'
          }
        }, [
          h('span', data.column.label)
        ])
      ])
    },
    getSingleDecide(row, e, index) {
      if (row) {
        const arr = []
        Object.keys(row).forEach(key => {
          if (key.startsWith('singleDecide_')) {
            arr.push(row[key])
          }
        })

        if (arr && arr.length > 0) {
          let foundOne = false
          arr.forEach(item => {
            if (item == 1) {
              row.singleDecide = 1
              foundOne = true
              return
            }
          })

          if (!foundOne) {
            const allTwos = arr.every(item => item === 2)
            if (allTwos) {
              row.singleDecide = 2
            }
          }
        }
      }
      if (this.parent.pageId == '首件检验单') {
        let isSingle = false
        let isSingle1 = false
        let newData = []
        if (this.parent.listData.length > 0) {
          this.parent.listData.forEach(item => {
            if (item.itemPropertyName === '判定项') {
              isSingle = true
            }
          })
        }
        if (this.parent.listData1.length > 0) {
          this.parent.listData.forEach(item => {
            if (item.itemPropertyName === '判定项') {
              isSingle1 = true
            }
          })
        }
        if (isSingle || isSingle1) {
          newData = [...this.parent.tableData, ...this.parent.tableData2]
        }
        const allSingleDecideEqualOne = newData.every(item => item.singleDecide === 2)
        this.$emit('my-event1', allSingleDecideEqualOne)
      }
      // console.log(this.parent.tableData2)
      // const filteredArr = this.parent.tableData2.filter(item => item.singleDecide == 2)
      // this.singleNumber = filteredArr.length
      // this.$emit('my-event', this.singleNumber)
    },
    headerCellClassName(data) {
      if (['singleDecide'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    selectionChange1(rows) {
      this.selectionsAll1 = rows
    },
    // 处理滚动事件
    handleScroll(event) {
      this.scrollTop = event.scrollTop
      this.clientHeight = event.clientHeight
      this.scrollHeight = event.scrollHeight
      if ((this.scrollTop + this.clientHeight + 5) >= this.scrollHeight) {
        this.parent.currentPage++
        this.parent.handleBlur(this.parent.formData.spotCheckNumber ? this.parent.formData.spotCheckNumber : this.parent.formData.checkNumber)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .is-leaf {
  .cell {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 100%;
  }
}
/deep/.el-input__suffix {
  top: 11px;
}
/deep/ .el-table__row {
  height: 62px !important;
  .el-input__inner {
    width: calc(100% - 10px);
  }
}
/deep/.main_title {
  span {
    display: block;
    white-space: pre-line;/*保留换行符*/
    line-height: 15px !important;
  }
}
.table_container {
  padding-bottom: 20px !important;
  padding-top: 0px !important;
  /deep/ .el-input__inner {
    padding-right: 23px;
    margin-top: 11px !important;
    margin-left: 10px !important;
  }
  /deep/ .el-tooltip {
    padding-left: 0px !important;
    display: flex;
  }
}
.expand_container{
  display: flex;
  .el-form-item{
    margin-bottom: 10px;
  }
}
.expand_radio{
  padding-top: 20px;
  /deep/ .el-form-item__content{
    text-align: left;
    display: flex;
  }
}
.cell{
  padding-left: 0px !important;
}
/deep/.el-radio {
  margin-right: 15px !important;
}
/deep/.el-input__suffix {
  right: 1px;
}
</style>
